<template>
  <div>
    <div>用户名:<input type="text" v-model="name" /></div>
    <div>你的用户名为:{{ this.name }}</div>
    <div>年龄:<input type="number" v-model="age" /></div>
    <div>
      你喜欢爸爸还是妈妈:爸爸<input
        v-model="dan"
        type="radio"
        value="爸爸"
      />妈妈:<input type="radio" v-model="dan" value="妈妈" />已选:<span>{{
        dan
      }}</span>
    </div>
    <div>
      你喜欢的动物有:猴子:<input
        type="checkbox"
        v-model="duoxuan"
        value="猴子"
      />
      大象:<input type="checkbox" value="大象" v-model="duoxuan" /> 小狗:<input
        type="checkbox"
        v-model="duoxuan"
        value="小狗"
      />
      已选:<span>{{ duoxuan.join("|") }}</span>
    </div>
    <div>
      你喜欢什么类型的异性:(多选一)
      <select v-model="xia">
        <option value="成熟">成熟</option>
        <option value="性感">性感</option>
        <option value="温柔">温柔</option>
        <option value="火辣">火辣</option>
      </select>
      已选:<span>{{ xia }}</span>
    </div>
    <div>
      简单介绍一下自己(20个字以内)
      <textarea v-model="text" cols="30" rows="10" maxlength="20"></textarea>
      您还可以输入<span>{{ size - text.length }}</span
      >个字
    </div>
    <div>
      <button @click="add">添加</button>
      <button @click="chong">重置</button>
    </div>
    <h3>用户信息表</h3>
    <table border="1px" class="tab">
      <tr>
        <th>序号</th>
        <th>名字</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td><button @click="del(item.id)">删除</button></td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      list: [],
      duoxuan: [],
      dan: "",
      xia: "成熟",
      id: 0,
      name: "",
      age: "",
      text: "",
      size: 20,
    };
  },
  mounted() {},
  methods: {
    // 添加
    add() {
      if (this.name == "" || this.age == "") {
        alert("名字或者年龄为空不能添加！！！");
        return;
      } else {
        this.id++;
        var obj = {
          name: this.name,
          age: this.age,
          id: this.id,
        };
        this.list.push(obj);
      }
    },
    // 删除
    del(id) {
      this.list.forEach((item, i) => {
        if (item.id == id) {
          this.list.splice(i, 1);
        }
      });
    },
    // 重置
    chong() {
      this.name = "";
      this.age = "";
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.tab {
  width: 800px;
}
</style>